'use client';

import { useWeatherStore } from '@/store/weatherStore';
import { IconMapPin, IconX } from '@tabler/icons-react';

export default function CityList() {
    const { savedCities, selectedCity, removeSavedCity, setSelectedCity } =
        useWeatherStore();

    return (
        <div className="bg-white/80 backdrop-blur-md rounded-2xl p-6 shadow-lg">
            <h3 className="text-lg font-medium mb-4">已保存城市</h3>
            <div className="space-y-3">
                {savedCities.map((city) => (
                    <div
                        key={city.id}
                        className={`flex items-center justify-between p-3 rounded-lg
                            ${selectedCity?.id === city.id
                                ? 'bg-blue-50 border border-blue-200'
                                : 'hover:bg-gray-50'
                            }`}
                    >
                        <div
                            className="flex items-center gap-3 flex-1 cursor-pointer"
                            onClick={() => setSelectedCity(city)}
                        >
                            <IconMapPin
                                size={20}
                                className="text-gray-500"
                            />
                            <span>{city.name}</span>
                        </div>
                        <button
                            onClick={() => removeSavedCity(city.id)}
                            className="p-1 hover:bg-gray-100 rounded"
                        >
                            <IconX size={20} className="text-gray-500" />
                        </button>
                    </div>
                ))}
                {savedCities.length === 0 && (
                    <p className="text-gray-500 text-center py-4">
                        暂无保存的城市
                    </p>
                )}
            </div>
        </div>
    );
}